<template>
	<view class="zi-liao-container">
		<!-- 顶部导航栏 -->
		<myLoading v-if="isLoading"></myLoading>

		<template v-else>


			<view style="#fff" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view :style="'top:' + statusBarHeight + 'px;'" class="nav-bar" style="background-color: #3e475f;">
				<uni-icons class="back-icon" type="back" size="28" color="#ffffff" @click="goBack"></uni-icons>
				<text class="nav-title" style="color: #ffffff;">个人资料</text>
				<view class="nav-right"></view>
			</view>

			<!-- 个人资料列表 -->
			<view class="profile-list">
				<!-- 接单城市 -->
				<view class="list-item">
					<text class="item-label">接单城市</text>
					<view class="item-value">
						<text class="value-text">南京市</text>
						<uni-icons class="arrow-icon" type="right" size="20" color="#cccccc"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 间隔区域 -->
			<view class="gap-area"></view>

			<view class="profile-list">
				<!-- 头像 -->
				<view class="list-item" @click="goLoading">
					<text class="item-label">头像</text>
					<view class="item-value">
						<text class="value-text">审核成功</text>
						<uni-icons class="arrow-icon" type="right" size="20" color="#cccccc"></uni-icons>
					</view>
				</view>

				<!-- 姓名 -->
				<view class="list-item">
					<text class="item-label">姓名</text>
					<text class="value-text">{{ formData.name }}</text>
				</view>

				<!-- 身份证号码 -->
				<view class="list-item">
					<text class="item-label">身份证号码</text>
					<text class="value-text">{{ formatIdCard(formData.idCard) }}</text>
				</view>

				<!-- 手机号 -->
				<view class="list-item" @click="goLoading">
					<text class="item-label">手机号</text>
					<view class="item-value">
						<text class="value-text">{{ formatPhone(formData.phone) }}</text>
						<uni-icons class="arrow-icon" type="right" size="20" color="#cccccc"></uni-icons>
					</view>
				</view>

				<!-- 驾驶证初次领证日期 -->
				<view class="list-item">
					<text class="item-label">驾驶证初次领证日期</text>
					<text class="value-text">{{ formData.firstReceiveDate }}</text>
				</view>

				<!-- 证件信息管理 -->
				<view class="list-item" @click="gozhengjian">
					<text class="item-label">证件信息管理</text>
					<view class="item-value">
						<text class="value-text">去查看</text>
						<uni-icons class="arrow-icon" type="right" size="20" color="#cccccc"></uni-icons>
					</view>
				</view>
			</view>



			<view class="profile-list">
				<!-- 账号验证 -->
				<view class="list-item" @click="goyanzheng">
					<text class="item-label">账号验证</text>
					<view class="item-value">
						<text class="value-text">已完成</text>
						<uni-icons class="arrow-icon" type="right" size="20" color="#cccccc"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 间隔区域 -->
			<view class="gap-area"></view>

			<view class="profile-list" @click="gohegui">
				<!-- 合规认证 -->
				<view class="list-item">
					<text class="item-label">合规认证</text>
					<uni-icons class="arrow-icon" type="right" size="20" color="#cccccc"></uni-icons>
				</view>
			</view>


		</template>

	</view>
</template>

<script>
// 导入uni-icons组件
// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
	data() {
		return {
			// 可以在这里添加数据
			statusBarHeight: '50',
			formData: {
				name: '',
				phone: '',
				idCard: '',
				firstReceiveDate: '',
				avatar: ''
			},
			isLoading: true
		}
	},
	onShow() {
		this.loadUserData()
	},
	onLoad() {
		// 定义一个0.3-1的随机数
		let randomNum = Math.random() * 0.7 + 0.3;
		// 转换为毫秒
		let randomDelay = randomNum * 1000;
		// 延迟执行
		setTimeout(() => {
			setTimeout(() => {
				this.isLoading = false
			}, randomDelay)
		})
	},
	created() {
		console.log('onload')

		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		console.log(this.statusBarHeight)
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		goyanzheng() {
			uni.navigateTo({
				url: '/pages/yanzheng/yanzheng'
			})
		},
		gohegui() {
			uni.navigateTo({
				url: '/pages/hegui/hegui'
			})
		},
		
		loadUserData() {
			try {
				const userData = uni.getStorageSync('userInfo');
				if (userData) {
					const parsedData = JSON.parse(userData);
					this.formData = parsedData;
					console.log('成功加载本地存储的数据:', parsedData);
				}
			} catch (error) {
				console.error('加载本地存储数据失败:', error);
			}
		},
		// 格式化手机号，将中间四位替换为星号
		formatPhone(phone) {
			if (!phone || phone.length !== 11) return phone;
			return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		},
		// 格式化身份证号，显示前三位和后四位，中间用星号替换
		formatIdCard(idCard) {
			if (!idCard || idCard.length !== 18) return idCard;
			return idCard.replace(/(\d{3})\d{11}(\d{4})/, '$1***********$2');
		},
		gozhengjian() {
			uni.navigateTo({
				url: '/pages/zhengjian/zhengjian'
			})
		},
		goLoading() {
			uni.navigateTo({
				url: '/pages/loading/loading'
			})
		}
	}
}
</script>

<style scoped>
.zi-liao-container {
	height: 100vh;
	background-color: #F5F5F5;
}

/* 顶部导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	height: 100rpx;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
}

.back-icon {
	padding: 20rpx;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
}

.nav-right {
	width: 88rpx;
}

/* 个人资料列表 */
.profile-list {
	background-color: #fff;
}

/* 第一个个人资料列表有上边距，其他没有 */
.profile-list:first-child {
	margin-top: 120rpx;
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}

.item-label {
	font-size: 28rpx;
	color: #333333;
}

.item-value {
	display: flex;
	align-items: center;
}

.value-text {
	font-size: 28rpx;
	color: #999999;
	margin-right: 10rpx;
}

.arrow-icon {
	margin-left: 10rpx;
}

/* 最后一个列表项不加下边框 */
.list-item:last-child {
	border-bottom: none;
}

/* 间隔区域 */
.gap-area {
	height: 20rpx;
	background-color: #F5F5F5;
}
</style>
